<template>
	<view class="record_content">
		<view class="search_bar">
			<view class="input-row">
				<text class="iconfont_icon">&#xe6c8;</text>
				<m-input class="m-input" type="text" clearable focus v-model="account" placeholder="Search..."></m-input>
			</view>
		</view>
		<view v-if="!!recordList.length" class="record_list">
			<view class="record_item" v-for="(item, index) in recordList" v-if="item.stuName.indexOf(account) != -1" :key="index" @tap="goInterviewRecord(item)">
				<view class="item_left">
					<image class="item_img" :src="!!item.stuPhotoPath ? utils.localURL + '/' + item.stuPhotoPath : txImg" mode=""></image>
					<view class="item_name">
						<view>Student Name：{{item.stuName}}</view>
						<view>Guardian Name：{{item.guardianName}}</view>
						<!-- <text>美国加利福尼亚大学</text> -->
					</view>
				</view>
				<view class="item_right">
					<text>Wait Record</text>
					<text>{{item.interviewDate}}</text>
				</view>
			</view>
		</view>
		<view class="nothing" v-else>
			<image src="../../static/img/nothing.png"></image>
		</view>
	</view>
</template>

<script>
	import mInput from '../../components/m-input.vue';
	import api from '../../api/recordApi.js'
	import utils from '../../api/utils.js'
	import txImg from '../../static/img/avatarImg.jpeg';
	
	export default {
		data() {
			return {
				iconType: 'success',
				account: '',
				tabIndex: 0,
				recordList: [],
				txImg: txImg,
				avatar: '',
				utils: utils
			}
		},
		components: {
			mInput
		},
		methods: {
			selectTab(index) {
				this.tabIndex = index
			},
			// 访谈详情页
			goInterviewRecord(item) {
				uni.navigateTo({
					url: `./interviewRecord?intId=${item.interviewGuardianId}&stuId=${item.interviewStuId}`
				})
			}
		},
		async onLoad(options) {
			let _this = this
			let token = ''
			uni.getStorage({
				key: 'token',
				success(res) {
					token = res.data
				}
			})
			
			uni.showLoading({
				title: 'Please wait...',
				mask: true
			})
			let data = await api.getInterviewRecordList('interview/getGruSysInterviewList', {"current": 1, "size": 100, "interviewGuardianId": options.userId, "interviewStatus": '0'}, token)
			console.log(data)
			if (data.head.status) {
				_this.recordList = data.body
			} else {
				uni.showToast({
					title: data.head.msg,
					icon: 'none',
					duration: 2000
				});
			}
			uni.hideLoading()
		}
	}
</script>

<style scoped>
	.record_content {
		width: 100%;
		background-color: #f1f1f1;
		box-sizing: border-box;
	}
	
	.search_bar {
		width: 100%;
		padding: 15px;
		box-sizing: border-box;
		background-color: #fff;
	}
	
	.input-row {
		width: 100%;
		border: solid 1px #ccc;
		height: 35px;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		border-radius: 10px;
		padding: 0 5px;
		box-sizing: border-box;
	}
	
	.record_tab {
		display: flex;
		justify-content: space-between;
		margin-top: 5px;
		background-color: #fff;
	}
	
	.record_tab > text {
		flex: 1;
		text-align: center;
		font-size: 16px;
		padding: 15px 0;
	}
	
	.active {
		color: #0faeff;
		border-bottom: solid 2px #0faeff;
	}
	
	.record_list {
		list-style: none;
		padding: 0;
		margin: 5px 0 0 0;
	}
	
	.record_item {
		display: flex;
		justify-content: flex-start;
		padding: 15px 20px;
		box-sizing: border-box;
		background-color: #fff;
		margin-bottom: 5px;
	}
	
	.item_left {
		flex: 3;
		display: flex;
	}
	
	.item_left > .item_img {
		width: 45px;
		height: 45px;
		margin-right: 10px;
	}
	
	.item_left > .item_name {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	
	.item_name > view {
		font-size: 13px;
		color: #333;
	}
	
	.item_name > text {
		font-size: 13px;
		color: #555;
	}
	
	.item_right {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: flex-end;
	}
	
	.item_right > text {
		font-size: 13px;
	}
	
	.item_right > text:first-child {
		color: red;
	}
	
	.item_right > text:last-child {
		color: #333;
	}
	
	.nothing {
		width: 100%;
		text-align: center;
	}
	
	.nothing image {
		width: 150px;
		height: 150px;
		margin-top: 50%;
	}
</style>
